<template>
  <div class="app-container">
    <aside class="aside">
      <el-form ref="form" class="" :model="form" label-width="80px" inline>
        <el-form-item class="form-item">
          <el-select v-model="form.company">
            <el-option value="" label="选择品牌" />
            <el-option v-for="(c, i) of companies.array" :key="'com' + i" :value="c.value" :label="c.label" />
          </el-select>
        </el-form-item>
        <el-form-item class="form-item">
          <el-select v-model="form.city">
            <el-option value="" label="选择城市" />
            <el-option v-for="(c, i) of cities" :key="'city' + i" :value="c.value" :label="c.label" />
          </el-select>
        </el-form-item>
        <el-form-item class="form-item"><el-input v-model="form.code" placeholder="卡号" /></el-form-item>
        <el-form-item><el-button icon="el-icon-search" type="primary" @click="search">搜索</el-button></el-form-item>
        <el-form-item><el-button icon="el-icon-upload" type="primary" @click="openImport">导入</el-button></el-form-item>
      </el-form>
    </aside>
    <el-container class="pd-0">
      <el-main>
        <el-table border stripe :data="tableData.data">
          <el-table-column type="index" label="#" />
          <el-table-column v-for="(label, key) of columns" :key="'th' + key" :label="label" :prop="key" />
          <el-table-column prop="use_at" label="使用时间" />
          <el-table-column label="操作">
            <template slot-scope="{row, $index}">
              <el-button class="el-icon-delete" size="mini" type="primary" @click="deleteCard($index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <my-page :data="tableData" @change="changePage" />
      </el-main>
      <el-footer>
        <orm-import ref="importModel" :columns="columns" :template-file="templateFile" @submit="handlerImport" />
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import orm from '@/api/orm'
import company from '@/api/company'
import CardApi from '@/api/card'
import CityApi from '@/api/city'

import ImportTemplate from '@/config/importTemplate'
import ormImport from '@/components/ORM/Import'
import MyPage from '@/components/MyPage/index'

export default {
  name: 'CardIndex1',
  components: { ormImport, MyPage },
  data() {
    return {
      companies: {
        array: [],
        json: {}
      },
      form: {
        company: '',
        city: '',
        code: ''
      },
      tableData: {
        current_page: 0,
        data: []
      },
      templateFile: process.env.VUE_APP_HOST + '/file/card.xlsx',
      columns: ImportTemplate.cards,
      cities: [{ value: 'A', label: 'A类' }, { value: 'B', label: 'B类' }, { value: 'C', label: 'C类' }],
      cardModel: 'Card',
      regions: []
    }
  },
  watch: {
  },
  created() {
    this.getCompanies()
    this.getRegions()
  },
  methods: {
    getCards() {
      CardApi.list(this.tableData.current_page, this.form).then(res => {
        const cards = res.data
        cards.data.map(card => {
          card.company = card.companyinfo.name
          card.goods = card.goodsinfo ? card.goodsinfo.name : ''
          card.city_id = card.cityinfo ? card.cityinfo.city_name : ''
          return card
        })
        this.tableData = cards
      }).catch(() => {})
    },
    changePage(page) {
      this.tableData.current_page = page
      this.getCards()
    },
    search() {
      this.changePage(0)
    },
    getCompanies() {
      company.list().then(res => {
        this.companies = res
        this.getCards()
      }).catch(res => {})
    },
    deleteCard(index) {
      this.$confirm('确定删除吗').then(res => {
        const card = this.tableData.data[index]
        orm.delete(this.cardModel, card.id).then(res => {
          this.getCards()
        })
      }).catch(() => {})
    },
    getRegions() {
      CityApi.regions().then(res => {
        this.regions = res.data
      })
    },
    openImport() {
      this.$refs.importModel.open()
    },
    handlerImport(cards) {
      console.log(cards)
      const cities = {}
      console.log(this.regions.length)
      // debugger
      for (const key in cards) {
        const card = cards[key]
        for (const c of this.companies.array) {
          // 通过名称找企业ID
          if (c.label === card.company) {
            card.company = c.value
            break
          }
        }

        // 找到城市ID
        if (card.city_id) {
          if (typeof cities[card.city_id] === 'undefined') {
            for (const city of this.regions) {
              if (city.label === card.city_id) {
                cities[city.label] = city.value
                break
              }
            }
          }
          if (typeof cities[card.city_id] === 'undefined') {
            this.$message.error('城市【' + card.city_id + '】不存在')
            return
          }
          card.city_id = cities[card.city_id]
        }
        cards[key] = card
      }
      console.log(cards)
      orm.import(this.cardModel, cards).then(res => {
        this.getCards()
        this.$refs.importModel.close()
      }).catch(res => {})
    }
  }
}
</script>

<style scoped>
/deep/ .el-form-item{
  margin-top: 5px;
  margin-bottom: 5px;
}
.form-item {
  width: 150px;
}
</style>
